<template>
  <div class="accountManage">
    <div class="manage-box">
      <el-dialog
        title="查看头像"
        :visible.sync="dialogVisibleImg"
        width="30%"
        :before-close="handleCloseImg"
      >
        <div class="head">
          <img :src="imgUrl" class="iii" />
        </div>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="dialogVisibleImg = false">取 消</el-button> -->
          <el-button type="primary" @click="dialogVisibleImg = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="个人信息编辑"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div class="bbb">
          <el-upload
            class="avatar-uploader"
            action="/api/CjwAdmin/UploadPictures"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="用户名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="form.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input v-model="form.numberId"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker v-model="form.birth" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="form.sex" label="0">女</el-radio>
            <el-radio v-model="form.sex" label="1">男</el-radio>
          </el-form-item>
          <el-form-item label="职位">
            <el-select v-model="form.position" placeholder="请选择">
              <el-option
                v-for="item in positionList"
                :key="item.positionId"
                :label="item.positionName"
                :value="item.positionName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="个人权限">
            <el-switch
              v-model="form.state"
              active-text="权限正常"
              inactive-text="禁用权限"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editConfirm">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="个人权限编辑"
        :visible.sync="dialogVisible2"
        width="30%"
        :before-close="handleClose"
      >
        <el-switch v-model="limit" active-text="管理员权限"></el-switch>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
        </span>
      </el-dialog>
      <div class="btnRow">
        <el-input v-model="name" placeholder="请输入姓名"></el-input>
        <el-select v-model="sex" placeholder="性别">
          <el-option
            v-for="item in sexOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="sex" placeholder="职位">
          <el-option
            v-for="item in positionList"
            :key="item.positionId"
            :label="item.positionName"
            :value="item.positionName"
          ></el-option>
        </el-select>
        <el-button icon="el-icon-search" circle @click="beforeGetAdminList"></el-button>
      </div>
      <div class="record">
        <el-table :data="tableList" style="width: 100%">
          <el-table-column prop="adminName" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">{{ scope.row.sex == "1" ? "男" : "女" }}</template>
          </el-table-column>
          <el-table-column prop="position" label="职位"></el-table-column>
          <el-table-column prop="idNumber" label="身份证号码"></el-table-column>
          <el-table-column prop="phoneNumber" label="手机号码"></el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">{{ scope.row.state == "1" ? "正常" : "异常" }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link type="primary" @click="editAdmin(scope.row)">个人信息编辑</el-link>
              <el-link type="primary" @click="imgDetail(scope.row)">查看头像</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          align="right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalNumber"
          style="margin-top: 58px; margin-bottom: 40px"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    adminName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      imageUrl: "",
      url: "",
      name: "",
      sex: "",
      position: "",
      positions: [],
      sexOptions: [
        {
          value: "0",
          label: "女"
        },
        {
          value: "1",
          label: "男"
        }
      ],
      positionList: [],
      tableList: [],
      imgUrl: "",
      form: {
        adminId: 0,
        name: "",
        password: "",
        phoneNumber: "",
        numberId: "",
        sex: "1",
        position: "",
        birth: "",
        state: ""
      },
      url: "",
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisibleImg: false,
      limit: true,
      pageIndex: 1,
      pageSize: 10,
      totalNumber: 100
    };
  },
  created() {
    this.getPositionList();
    this.getAdminList();
  },
  methods: {
    editAdmin(data) {
      console.log(data);
      this.dialogVisible = true;
      this.imageUrl = data.img;
      this.form.adminId = data.adminId;
      this.form.name = data.adminName;
      this.form.password = data.adminPassword;
      this.form.phoneNumber = data.phoneNumber;
      this.form.numberId = data.idNumber;
      this.form.birth = data.birth;
      this.form.sex = data.sex;
      this.form.position = data.position;
      this.form.state = data.state;
      console.log(this.form);
    },
    editConfirm() {
      let params = {
        adminId: this.form.adminId,
        adminName: this.form.name,
        adminPassword: this.form.password,
        phoneNumber: this.form.phoneNumber,
        idNumber: this.form.numberId,
        birth: this.form.birth,
        sex: this.form.sex,
        position: this.form.position,
        state: this.form.state,
        img: this.imageUrl
      };
      console.log(params);
      this.$axios.post("/api/CjwAdmin/UpdateAdmin", params).then(res => {
        console.log(res);
        this.getAdminList();
        this.$message({
          message: "修改成功",
          type: "success"
        });
        this.dialogVisible = false;
        let op = {
          opAdminName: this.adminName,
          opTable: "修改员工信息",
          opData: `员工id:${params.adminId}`
        };
        this.$axios.post("/api/CjwOperationList/InsertOpData", op);
      });
    },
    editLimit() {
      this.dialogVisible2 = true;
    },
    beforeGetAdminList() {
      this.getAdminList();
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    getPositionList() {
      this.$axios.get("/api/CjwPosition/GetPositionList").then(res => {
        this.positionList = res.data;
        console.log(res.data);
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleCloseImg() {
      this.dialogVisibleImg = false;
    },
    getAdminList() {
      let params = {
        adminName: this.name,
        sex: this.sex,
        position: this.position,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      };
      console.log(params);
      this.$axios.get("/api/CjwAdmin/GetAdminList", { params }).then(res => {
        console.log(res);
        this.tableList = res.data.adminLis;
        this.totalNumber = res.data.total;
      });
    },
    imgDetail(data) {
      console.log(data);
      this.imgUrl = data.img;
      this.dialogVisibleImg = true;
    },
    handleAvatarSuccess(res, file) {
      // console.log(res);
      // console.log(file);
      this.imageUrl = res;
      this.url = res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style scoped>
.btnRow {
  padding: 10px;
}

.btnRow .el-input {
  width: 300px;
}

.accountManage {
  height: 100%;
}

.manage-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.record {
  position: absolute;
  bottom: 120px;
  top: 130px;
  left: 10px;
  right: 10px;
}

.record .el-table {
  height: 100%;
  width: 100%;
}

.page {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.manage-box .el-form .el-date-editor {
  width: 100%;
}

.manage-box .el-form .el-select {
  width: 100%;
}

.head {
  width: 100%;
  height: 100%;
}

.head .iii {
  height: 100%;
  width: 100%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.bbb {
  display: flex;
  justify-content: center;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>